﻿@page
@using SXFramWork.Web
@{
    Layout = AdminLayout.Pjax(HttpContext);
    ViewData["Title"] = "账户管理";
}

<div id="container">
    <style>
        .layui-col-220 .layui-nav-title {
            line-height: 25px;
            height: auto;
            padding: 20px 0 20px 20px;
            text-indent: 0px;
            width: auto;
        }

        .layui-btn-group .layui-btn {
            background: #e7eaef !important;
            border-color: #e7eaef !important;
            color: #333;
        }

            .layui-btn-group .layui-btn.active {
                background-color: #409eff !important;
                border-color: #409eff !important;
                color: #fff;
            }

        .layui-icon-export,
        .layui-icon-friends {
            margin-right: 5px;
            color: #aee4fa;
        }

        .role-item {
            padding: 6px 0px 6px 50px;
            cursor: pointer
        }

            .role-item.active {
                background-color: #dbedf5;
            }


        .layui-colla-content {
            padding: 0px;
            border-color: transparent;
        }

        .layui-colla-title {
            background-color: transparent
        }

        .layui-colla-item {
            border-color: transparent;
        }
    </style>
    <div class="layui-col-220" id="app">
        <div class="layui-nav-title">
            <div class="layui-btn-group">
                <button type="button" class="layui-btn active">组织架构</button>
                <button type="button" class="layui-btn">　角色　</button>
            </div>
        </div>
        <div class="role-tab">

            <div id="tree" class="layui-tree-cus" style="overflow:auto;"></div>

            <div id="role" class="layui-collapse" style="overflow:auto; display:none">

                <div class="layui-colla-content layui-show">
                    <div class="role-item" :class="sysroleid==row.id?'active':''" v-for="row in list"
                         @@click="loaduser(row)">
                        <i class="layui-icon layui-icon-friends"></i>{{row.name}}
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="right-col-body">
        <div class="list-wall">
            @*顶部按钮*@
            <div class="layui-form list-search">

                <button type="button" class="layui-btn layui-btn-sm layui-hide" data-type="reload">
                    <i class="layui-icon layui-icon-refresh"></i> 刷新
                </button>

                <button type="button" class="layui-btn layui-btn-normal " data-type="add" action-code="admin_sysuser_add">
                <i class="layui-icon layui-icon-add-circle"></i>添加
                </button>
                <button type="button" class="layui-btn layui-btn-danger " data-type="delete" action-code="admin_sysuser_delete">
                <i class="layui-icon layui-icon-delete"></i>删除
                </button>
                <button type="button" class="layui-btn layui-btn-normal" data-type="import"><i class="layui-icon layui-icon-file"></i>Excel导入</button>
                <button type="button" class="layui-btn layui-btn-normal" data-type="export"><i class="layui-icon layui-icon-list"></i>数据导出</button>

            </div>

            @* 表格数据 *@
            <table class="layui-hide" id="tablelist" lay-filter="tool"></table>



        </div>

        @* 行内工具栏*@
    <script type="text/html" id="tool">
        <a class="layui-btn  layui-btn-normal" lay-event="show" action-code="admin_sysuser_get"> 查看</a>
        <a class="layui-btn  layui-btn-warm " lay-event="edit" action-code="admin_sysuser_update"> 修改</a>
        <a class="layui-btn  layui-btn-normal" lay-event="pdfshow" >打印预览</a>
    </script>



    </div>

    <script>
        //vue
        var vm = new Vue({
            el: '#app',
            data: {
                list:[],
                sysorgid: '',
                sysroleid: '',
                active:{}
            },
            methods: {

                //点击角色加载用户
                loaduser(v) {
                   vm.sysroleid = v.id;
                   vm.active.reload();
                }
            }
        });

        //layui
        layui.use(['element', 'layer', 'jquery', 'tree', 'common','table'],
            function () {
                var element = layui.element, table = layui.table,
                    layer = layui.layer,
                    $ = layui.jquery,
                    tree = layui.tree,
                    os = layui.common;


                //加载按钮权限
                os.permission();

                $("#tree,#role").css({ 'height': $(window).height() - 140 });

                //加载表格数据
                os.tableRender({
                    elem: '#tablelist',
                    url: "/api/admin/sysuser/list",
                    cols: [
                        [
                            { type: 'checkbox', fixed: 'left' },
                            { field: 'userName', title: '用户名', sort: true, fixed: 'left' },
                            { field: 'trueName', title: '真实姓名' },
                            //{ field: 'departmentName', title: '所属部门' },
                            { field: 'roles', title: '角色' },
                            { field: 'sex', title: '性别',width:80, templet: function (a) { if (a.sex == 1) return '女'; else return '男' } },
                            { field: 'phone', title: '电话' },
                            { field: 'status', title: '状态', templet: function (a) { if (a.status == 1) return '正常';  else return '冻结'  } },
                            { field: 'adress', title: '地址' },
                            { field: 'upLoginDate', title: '最后登录时间', width: 160 },
                            { field: 'remarks', title: '备注' },
                            { title: '操作',width:220,  templet: '#tool' }
                        ]
                    ]
                })


                //定义方法
                vm.active = {
                    //初始化
                    initTree: function() {
                        os.ajax('api/admin/sysorganize/gettree', {}, function (res) {
                            tree.render({
                                elem: '#tree'
                                , data: res.data
                                , onlyIconControl: true
                                , accordion: true
                                , click: function (obj) {
                                    vm.sysorgid = obj.data.id;
                                    //刷新表格
                                    vm.active.reload();
                                }
                            });
                        },'get');
                        os.ajax('api/admin/sysrole/list', { size: 1000 }, function (res) {
                            vm.list = res.data.rows;
                            vm.$nextTick(function () {
                                element.render();
                            });
                        }, 'get');
                    },

                    //重新加载table
                    reload: function () {
                        os.tableReload('tablelist',
                            { where: { sysOrganizeId: vm.sysorgid, sysRoleId: vm.sysroleid } }
                        )
                    },

                    //添加
                    add: function () {
                        os.Open('添加用户', '/Admin/SysUser/Add', '1100px', '500px', function () {

                        });
                    },
                    //删除
                    delete: function () {
                        var checkStatus = table.checkStatus('tablelist')
                            , data = checkStatus.data;

                        if (data.length === 0) {
                            os.error("请选择要删除的项目!");
                            return;
                        }
                        var str = '';
                        $.each(data, function (i, item) {
                            str += item.id + ",";
                        });
                        str = str.substring(0, str.length - 1);
                        layer.confirm('确定要执行批量删除吗？', function (index) {
                            layer.close(index);
                            os.ajax('api/admin/sysuser/delete/', { ids: str }, function (res) {
                                if (res.code == 1) {
                                    os.success(res.msg);
                                    vm.active.reload();
                                } else {
                                    os.error(res.message);
                                }
                            },'get');
                        });

                    },
                    //导出Excel

                    export: function () {

                        var url = '/api/admin/sysuser/exportexcel';
                        os.xhrSend(url, 'get');
                    },

                    import: function () {
                        os.Open('选择文件', '/Admin/SysUser/ImportExcel', '470px', '260px', function () {
                           
                        })
                    }
                };

                //初始化tree
                vm.active.initTree();

                $('.list-search .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    vm.active[type] ? vm.active[type].call(this) : '';
                });


                //左侧按钮切换状态
                $('.layui-btn-group .layui-btn').click(function () {
                    $('.layui-btn-group .layui-btn').removeClass('active');
                    $(this).addClass('active');
                    var tabIndex = $(this).index();
                    if (tabIndex == 0) {
                        $("#tree").show();
                        $("#role").hide();
                        vm.sysroleid = '';
                    } else {
                        $("#tree").hide();
                        $("#role").show();
                        vm.sysorgid = '';
                    }
                });

                //监听工具条
                table.on('tool(tool)', function (obj) {
                    var data = obj.data;
                    if (obj.event === 'edit') {
                        os.Open('编辑用户', '/Admin/SysUser/Add/?id=' + data.id, '1100px', '500px', function () {
                            //vm.active.reload();
                        })
                    }
                    if (obj.event == 'show') {
                        os.Open('查看用户', '/Admin/SysUser/Add/?id=' + data.id+"&opt=show", '1100px', '500px', function () {
                        })
                    }
                    if (obj.event == 'pdfshow') {
                       
                        os.Open('pdf打印预览', '/api/Admin/SysUser/GetPdf/?id=' + data.id, '1100px', '500px', function () {
                        })
                    }
                });
            });
    </script>


</div>